<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue'
import * as aecharts from 'echarts'
import axios from 'axios';
// 图表数据
const data = reactive({
    large: [],
    medium: [],
    small: [],
    xdata: [],
})
// 获取 虚拟化Dom
const barChart = ref()
// 初始化图表
const init = async () => {
    await axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/bar').then(res => {
        console.log(res.data);
        data.large = res.data.large
        data.medium = res.data.medium
        data.small = res.data.small
        data.xdata = res.data.xdata
    })
    // 通过dom，初始化echarts图表  获取ref虚拟化dom
    let myChart = aecharts.init(barChart.value)
    var option = {
        title: {
            text: 'SKU销售周报'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
        },
        xAxis: {
            type: 'category',
            data: data.xdata
        },
        yAxis: {
        },
        series: [
            {
                name: '小份',
                type: 'bar',
                stack: '销量',
                barWidth: '60%',
                data: data.small
            },
            {
                name: '中份',
                type: 'bar',
                stack: '销量',
                barWidth: '60%',
                data: data.medium
            },
            {
                name: '大份',
                type: 'bar',
                stack: '销量',
                barWidth: '60%',
                data: data.large
            },
        ]
    };
    myChart.setOption(option)
}
onMounted(() => {
    init()
})
</script>
<template>
    <div class='barChart' ref="barChart">
    </div>
</template>
<style lang='less' scoped>
.barChart {
    width: 100%;
    height: 400px;
}
</style>